既然昨天拿到 Opensea 的資料了，那最接下來的是規劃顯示細節，就以一個錢包或者是收藏庫來說我們可以在 assets 列表點擊 assets 縮圖後，進入 assets 細節頁面，在細節頁面處理各種不同的 NFT 素材格式後顯示出來。

目標

步驟

帶入此 NFT 的合約地址 token_id

https://testnets-api.opensea.io/api/v1/asset/${router.query.contract}/${router.query.token_id}/

1. 先使用 API retrieving-a-single-asset-testnets

範例
https://testnets-api.opensea.io/api/v1/asset/0x10ef74561e1affe18262a1e0763d3d26648a36f5/2/

2. 取得此 assets 的信息 參考 Asset Object

3. 藉由 步驟2 中的 assets 資料，擷取我們想顯示的部分

  let items = {
          id: data.id,
          schema_name: data.asset_contract?.schema_name,
          name: data.name,
          description: data.description,
          image: data.image_url,
          image_preview_url: data.image_preview_url,
          permalink: data.permalink,
          collection: data.collection.name,
          owner: data.top_ownerships[0].owner.address,
          owner_img: data.top_ownerships[0].owner.profile_img_url,
          creator: data.creator.address,
          creator_img: data.creator.profile_img_url,
        };

3. 規畫版面 這邊使用 Next.js + chakra-ui + Tailwind CSS

OK 到此就搞定基本的圖檔顯示了～ 接者來處理 3D 素材跟影片吧

如果有不懂的地方可以偷看完成的DEMO